
<!DOCTYPE html>
<html>

<head>
   
    
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!--360浏览器优先以webkit内核解析-->


<title>添加模板</title>

<link rel="shortcut icon" href="__STATIC__/layout/favicon.ico">
<link href="__STATIC__/layout/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<link href="__STATIC__/layout/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
<link href="__STATIC__/layout/css/animate.css" rel="stylesheet">
<link href="__STATIC__/layout/css/style.css?v=4.1.0" rel="stylesheet">
<link href="__STATIC__/layout/css/channel.css?v=4.1.0" rel="stylesheet">
<!-- Sweet Alert -->
<link href="__STATIC__/layout/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
 <link href="__STATIC__/layout/css/plugins/summernote/summernote.css" rel="stylesheet">
    <link href="__STATIC__/layout/css/plugins/summernote/summernote-bs3.css" rel="stylesheet">
  
 <link rel="stylesheet" type="text/css" href="__STATIC__/layout/css/plugins/webuploader/webuploader.css">
    <link rel="stylesheet" type="text/css" href="__STATIC__/layout/css/demo/webuploader-demo.css">

    <link rel="stylesheet" href="__STATIC__/layout/css/demo.css" type="text/css">
    <link href="__STATIC__/layout/css/gyq.css" rel="stylesheet">
    <style>
           .radio-inline input[type=radio],.checkbox-inline input[type=checkbox] {
            margin-top: 4px
        }

        .note-editable {
            height: 150px
        }
        #infomation tr td{padding: 1px}
        #infomation tr td input[type="text"]{
            width: 80%
        }
    </style>

</head>

<body class="white-bg" style="padding: 3px;font-size: 12px">
    <div class="page-heade">
       <h2 class="title_color text-center">出差申请</h2>
    </div>
    <form  class="form-inline" id="form1">
      <input type="hidden" name="state" id="state"/>
      <input type="hidden" name="aid" value="{$aid}"/>
         <table class="table table-bordered bud_hei text-center">
            <tr>
                <td style="width: 140px;">类型</td>
                <td class="text-left" colspan="3">
                    <label class="radio-inline" for="travelKind1">
                        <input type="radio" name="traveltype" value="1" checked>周边行程申请(当天往返)
                    </label>
                     <label class="radio-inline" for="travelKind2">
                        <input type="radio" name="traveltype" value="2" {if $aid}{if $apply.traveltype==2} checked {/if} {/if}>出差申请(不能当天往返，需产生住宿)
                    </label>
                </td>
            </tr>
            <tr>
                <td>编号</td>
                <td class="text-left">{if $aid}{$apply.no}{/if}</td>
                <td style="width: 140px;">申请时间</td>
                <td class="text-left">{$ctime}</td>
            </tr>
            <tr>
                 <td>部门</td>
                <td class="text-left">{$user.de_name}</td>
                 <td>状态</td>
                <td class="text-left">{$state}</td>
              
            </tr>
            <tr>
                <td>姓名</td>
                <td class="text-left">{$user.em_name}</td>
                <td>职务</td>
                <td class="text-left">{$user.role_name}</td>
            </tr>
            <tr>
                <td>拜访经销商类型</td>
                <td class="text-left">
                    <label for="agencyCustomer">
                    <input type="checkbox" name="baifang[]" value='1' {if $aid}{if $apply.baifang=="1"||$apply.baifang=="1,2"} checked {/if} {/if}>经销客户
                    </label>
                     <label for="zhiyingCustomer">
                    <input type="checkbox" name="baifang[]" value='2' {if $aid}{if $apply.baifang=="2"||$apply.baifang=="1,2"} checked {/if} {/if}>直营客户
                    </label>
            </td>
              <td>职务代理人</td>
                <td class="text-left">
                       <div class="container-fluid">
                            <div class="row">
                                <div class="col-xs-8">
                                    <div class="input-group" {if $aid}{if $daili} style="display: none;" {/if}{/if} >
                                        <input type="text" placeholder="请输入关键字或空格查询" class="cname form-control"  name="dailiren" value="{if $aid}{if $daili}{$daili.id}{/if}{/if}">
                                        <div class="input-group-btn">
                                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                                <span class="caret"></span>
                                            </button>
                                            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="selectedOnlyOne "  style="display: none;" >
                                      
                                        <span class="inin">{if $aid}{if $daili} {$daili.em_name} {/if}{/if}</span>
                                        <span class="close">×</span>
                                    </div>
                                </div>
                               <div class="col-xs-4">
                                <button class="btn btn-primary select_cname" type="button" >选择</button>
                            </div>
                           </div>
                        </div>
                </td>
            </tr>
            <tr>
                <td>主题 <span class="colorRed">*</span></td>
                <td colspan="5" class="text-left"><input type="text" name="title" class="form-control" value="{if $aid}{$apply.title}{/if}"></td>
            </tr>
            <tr>
                <td>预估差旅费用<span class="colorRed">*</span></td>
                <td class="text-left"><input type="text" name="feiyong" class="form-control num2" value="{if $aid}{$apply.feiyong}{/if}">元(注：如不涉及费用请填0)</td>
            </tr>
           <tr>
                <td>作废原因 <span class="colorRed">（如选择作废则必须填写）</span></td>
                <td colspan="5" class="text-left"><textarea name="reason" class="form-control" style="width: 70%;resize: none;"></textarea></td>
            </tr>
            <tr>
              <td colspan="4" style="padding: 1px;">
                  <table class="table-bordered table bud_hei text-center" id="infomation">
                    <thead>
                      <tr class="info">
                          <td>起始时间 <span class="colorRed">*</span>  </td>
                           <td>结束时间 <span class="colorRed">*</span>  </td>
                           <td>出发地 <span class="colorRed">*</span>  </td>
                           <td>目的地 <span class="colorRed">*</span>  </td>
                           <td>天数 <span class="colorRed">*</span>  </td>
                           <td>点对点公里数 <span class="colorRed">*</span>  </td>
                           <td>发车/起飞时间<br>时:分,如：09:30 <span class="colorRed">*</span>  </td>
                            <td>交通工具 <span class="colorRed">*</span>  </td>
                            <td>点对点乘车<br>所需时间(小时) <span class="colorRed">*</span>  </td>
                            <td>陪同人员</td>
                            <td><button class="btn-sm btn btn-primary" id="addneirong" type="button">添加明细</button></td>
                      </tr>
                    </thead>
                    <tbody id="neirong">
                      {if $aid}
                        {volist name="de" id="vo"}
                          <tr>
                            <td>
                              <input type="text" name="start[]" value="{$vo.start}" class="form-control layer-date start" onclick="laydate({ istime: true, format: 'YYYY-MM-DD' })">
                            </td>
                            <td>
                              <input type="text" name="end[]" value="{$vo.end}" class="form-control layer-date end" onclick="laydate({ istime: true, format: 'YYYY-MM-DD' })">
                            </td>
                            <td><input type="text" name="chufa[]" value="{$vo.chufa}" class="form-control"></td>
                            <td><input type="text" name="mudi[]" value="{$vo.mudi}" class="form-control"></td>
                            <td><input type="text" name="ts[]" value="{$vo.ts}" class="form-control num"></td> 
                            <td><input type="text" name="gl[]" value="{$vo.gl}" class="form-control num2"></td>
                            <td><input type="text" name="qishi[]"  value="{$vo.qishi}" class="form-control"></td> 
                            <td>
                              <select class="form-control select" name="fangshi[]">
                                <option value="0" {if $vo.fangshi==0} selected {/if}>火车</option> 
                                <option value="1" {if $vo.fangshi==1} selected {/if}>轮渡</option>
                                <option value="2" {if $vo.fangshi==2} selected {/if}>飞机</option> 
                                <option value="3" {if $vo.fangshi==3} selected {/if}>大巴</option>
                                <option value="4" {if $vo.fangshi==4} selected {/if}>自驾车</option>
                                <option value="5" {if $vo.fangshi==5} selected {/if}>其他</option>
                              </select>
                            </td> 
                            <td><input type="text" name="shijian[]" value="{$vo.shijian}" class="form-control num2"></td>
                            <td>
                              <input type="text" name="peitongren[]" value="{$vo.peitongren}" class="form-control" readonly><input type="hidden" name="peitongid[]" value="{$vo.peitongid}"/><a class="xzpt" href="javascript:;">选择</a> 
                            </td>
                            <td><button class="btn btn-sm btn-danger sc" type="button">删除</button></td>
                          </tr>
                        {/volist}
                      {else/}
                      <tr>
                        <td>
                          <input type="text" name="start[]" class="form-control layer-date start" onclick="laydate({ istime: true, format: 'YYYY-MM-DD' })">
                        </td>
                        <td>
                          <input type="text" name="end[]" class="form-control layer-date end" onclick="laydate({ istime: true, format: 'YYYY-MM-DD' })">
                        </td>
                        <td><input type="text" name="chufa[]" class="form-control"></td>
                        <td><input type="text" name="mudi[]" class="form-control"></td>
                        <td><input type="text" name="ts[]" class="form-control num"></td> 
                        <td><input type="text" name="gl[]" class="form-control num2"></td>
                        <td><input type="text" name="qishi[]" value=":" class="form-control"></td> 
                        <td>
                          <select class="form-control select" name="fangshi[]">
                            <option value="0">火车</option> 
                            <option value="1">轮渡</option>
                            <option value="2">飞机</option> 
                            <option value="3">大巴</option>
                            <option value="4">自驾车</option>
                             <option value="5">其他</option>
                          </select>
                        </td> 
                        <td><input type="text" name="shijian[]" class="form-control num2"></td>
                        <td>
                          <input type="text" name="peitongren[]" class="form-control" readonly>
                          <input type="hidden" name="peitongid[]"/>
                          <a class="xzpt" href="javascript:;">选择</a> 
                        </td>
                        <td><button class="btn btn-sm btn-danger sc" type="button">删除</button></td>
                      </tr>
                      {/if}
                    </tbody>
                  </table>
              </td>
            </tr>
            <tr>
                <td class="font-bold">行程目的<br>(需要解决的问题)<span class="colorRed">*</span></td>
                <td colspan="3" class="text-left">
                     <div class="ibox float-e-margins" style="margin-bottom: 0">
                        <div class="ibox-content no-padding">

                            <textarea class="summernote" id="target" name="target">{if $aid}{$apply.target}{/if}</textarea>

                        </div>
                    </div>
                </td>
            </tr>
            <tr>
             <td colspan="4" class="text-left">温馨提醒：本编辑器不支持复杂表单提交，复杂表单请以附件形式提交</td>
            </tr>
        </table>
         <div class="form-group white-bg" style="margin:20px 10px 20px 20px;">
            <div id="uploader" class="wu-example">
                <!--用来存放文件信息-->
                <div id="thelist" class="uploader-list">
                   {volist name="fujian" id="fo"}
                        <h4>{$fo.file_name}</h4>
                   {/volist}
                </div>
                <div class="btns">
                    <div id="picker">选择文件</div>
                    <button id="ctlBtn" class="btn btn-sm btn-default">开始上传</button>
                </div>
                <input type="hidden" name="attach" id="attach" {if $aid}{if $apply.fujian} value="{$apply.fujian}" {/if}{/if}   >
            </div>
            <span>注：最多上传15个文件，每个文件小于50M,支持格式：</span><br>jpg,bnp,gif,png,jpeg,tif,raw,doc,docx,xls,xlsx,ppt,pptx,txt,pdf,rar,zip,mp4,avi,rmvb,rm,mid,3gp,AVI,3GP,,mpg,mp3,wma,wav
        </div>

        <div class="padding-10 text-center">
          <input type="hidden" id="nodeKey" name="nodeKey"/>
          <input type="hidden" id="selectId" name="selectId"/>
          <input type="hidden" id="selectName" name="selectName"/>
            {volist name="btn.nextNodes" id="b"}
              {if $b.nodeName=='结束'}
              <input type="button" class="btn-danger btn" onclick="zuofei('{$b.nodeKey}','{$b.selectId}','{$b.selectName}')" value="点此作废"/>
              {else/}
              <input type="button" class="btn-info btn" onclick="baocun('{$b.nodeKey}','{$b.selectId}','{$b.selectName}')" value="保存并提交工作流"/>
              {/if}
            {/volist}
        </div>
    </form>
  
    
<!-- 全局js -->
<script src="__STATIC__/layout/js/jquery.min.js"></script>
<script src="__STATIC__/layout/js/bootstrap.min.js?v=3.3.6"></script>
<!-- Sweet alert -->
<script src="__STATIC__/layout/js/plugins/sweetalert/sweetalert.min.js"></script>
<script src="__STATIC__/layout/js/plugins/suggest/bootstrap-suggest.min.js"></script>
<script src="__STATIC__/layout/js/plugins/layer/layer.min.js"></script>
 <script src="__STATIC__/layout/js/plugins/layer/laydate/laydate.js"></script>
<script>
 var fr={$from};
function zuofei(nodeKey,selectId,selectName){
  $("#nodeKey").val(nodeKey)
  $("#selectId").val(selectId)
  $("#selectName").val(selectName)
   $.ajax({
          cache: true,
          type: "POST",
          url:"{:url('zuofeichuli')}",
          data:$('#form1').serialize(),// 你的formid
          async: false,
          error: function(request) {
            alert("Connection error");
          },
          success: function(data) {
            //alert(data);
            //var res=JSON.parse(data);
                    var res1=JSON.parse(data);
                            if(res1["state"]==1){
                              swal({
                                title: "完成",
                                text: "操作已成功",
                                type: "success"
                                },function(){
                                   if(fr==1)
                                        location.href="{:url('mychuchai')}"
                                    else
                                        location.href="{:url('Workflowdb/index')}"
                                  //parent.layer.close(parent.layer.getFrameIndex(window.name))
                                  //
                                });

                          }else{
                            swal({
                            title: "错误",
                            text:  res1["msg"],
                            type: "warning"
                            });
                          }           
          }
        });
}
function baocun(nodeKey,selectId,selectName){
  $("#nodeKey").val(nodeKey)
  $("#selectId").val(selectId)
  $("#selectName").val(selectName)
   $.ajax({
          cache: true,
          type: "POST",
          url:"{:url('baocunchuli')}",
          data:$('#form1').serialize(),// 你的formid
          async: false,
          error: function(request) {
            alert("Connection error");
          },
          success: function(data) {
            //alert(data);
            //var res=JSON.parse(data);
                    var res1=JSON.parse(data);
                            if(res1["state"]==1){
                              swal({
                                title: "完成",
                                text: "操作已成功",
                                type: "success"
                                },function(){
                                  if(fr==1)
                                        location.href="{:url('mychuchai')}"
                                  else
                                        location.href="{:url('Workflowdb/index')}"
                                });

                          }else{
                            swal({
                            title: "错误",
                            text:  res1["msg"],
                            type: "warning"
                            });
                          }           
          }
        });
}
{if $aid}{if $daili} 
$(".selectedOnlyOne").show();
{/if}{/if}
 $('body').on('blur','.num',function () {
        if(isNaN(parseInt($(this).val()))){
          $(this).val(0);
        }else{
          $(this).val(parseInt($(this).val()));
        }
    })
  $('body').on('blur','.num2',function () {
       if(isNaN(parseFloat($(this).val()))){
          $(this).val("0.00");

        }else{
          $(this).val(parseFloat($(this).val()).toFixed(2));
        }
    })


//弹出陪同人
$('body').on('click','.xzpt',function () {
  var _this = $(this)
                layer.open({
                    type:2,
                    area:['60%','60%'],
                    title:'人员树',
                    maxmin:true,
                    content:'{:url("Apcaiwu/selectCname")}',
                    btn:'确定',
                    btnAlign:'c',
                    yes:function (i,o) {

                        var id = $(o).find('iframe').contents().find('#renyuan').val()
                        var name = $(o).find('iframe').contents().find('#renyuanname').val()
                        if(id){
                            _this.prev().val(id);
                            _this.prev().prev().val(name);
                           
                        }
                        layer.close(i)
                    }
                })
                return  false

})

  $("#addneirong").click(function(){
      $("#neirong").append('<tr><td><input type="text" name="start[]" class="form-control layer-date start" onclick="laydate({ istime: true, format: \'YYYY-MM-DD\' })"></td><td><input type="text" name="end[]" class="form-control layer-date end" onclick="laydate({ istime: true, format: \'YYYY-MM-DD\' })"></td><td><input type="text" name="chufa[]" class="form-control"></td><td><input type="text" name="mudi[]" class="form-control"></td><td><input type="text" name="ts[]" class="form-control num"></td> <td><input type="text" name="gl[]" class="form-control num2"></td> <td><input type="text" name="qishi[]" value=":" class="form-control"></td> <td> <select class="form-control select" name="fangshi[]"><option value="0">火车</option> <option value="1">轮渡</option><option value="2">飞机</option> <option value="3">大巴</option><option value="4">自驾车</option><option value="5">其他</option></select></td> <td><input type="text" name="shijian[]" class="form-control num2"></td><td><input type="text" name="peitongren[]" class="form-control" readonly><input type="hidden" name="peitongid[]"/><a class="xzpt" href="javascript:;">选择</a> </td><td><button class="btn btn-sm btn-danger sc" type="button">删除</button></td></tr>');
     
  })
   $('body').on('click','.sc',function () {
       $(this).parent().parent().remove();
    })
 //取消单选
    $('body').on('click','.selectedOnlyOne .close',function () {
        $(this).closest('.selectedOnlyOne').hide().find('.inin').html('')
        $(this).closest('.selectedOnlyOne').prev('.input-group').show().find('input').val('')
    })
//弹出选择我的支付人树
        $('body').on('click','.select_cname',function () {
            var _this = this
                layer.open({
                    type:2,
                    area:['60%','60%'],
                    title:'人员树',
                    maxmin:true,
                    content:'{:url("Apcaiwu/selectCname")}',
                    btn:'确定',
                    btnAlign:'c',
                    yes:function (i,o) {

                        var id = $(o).find('iframe').contents().find('#renyuan').val()
                        var name = $(o).find('iframe').contents().find('#renyuanname').val()
                        if(id){
                            $(_this).closest('div').prev('div').find('.input-group').hide().find('.feetype').val(id)
                            $(_this).closest('div').prev('div').find('.selectedOnlyOne').show().find('.inin').html(name)
                        }
                        layer.close(i)
                    }
                })
                return  false
        })
    //支付人搜索自动补全
    $(".cname").bsSuggest({
        url: "{:url('Apcaiwu/cnamejson')}",
        /*effectiveFields: ["userName", "shortAccount"],
         searchFields: [ "shortAccount"],*/
        effectiveFieldsAlias:{title: "名称"},
        ignorecase: true,
        showHeader: true,
        showBtn: false,     //不显示下拉按钮
        delayUntilKeyup: true, //获取数据的方式为 firstByUrl 时，延迟到有输入/获取到焦点时才请求数据
        idField: "id",
        keyField: "title",
        clearable: true
    }).on('onSetSelectValue', function (e, keyword, data) {
        $(this).closest('.input-group').hide().next('.selectedOnlyOne').show().find('.inin').html(keyword.key)
        $(this).val(keyword.id)

    });
    $(function () {
        $('body').on('click','input[type=text]',function () {
            this.select()
        })
          $('#fanhui').on('click',function () {
//                    parent.layer.close(parent.layer.getFrameIndex(window.name))
                    parent.location.reload();
                    return false
                })
    })
</script>
   <script src="__STATIC__/layout/js/plugins/summernote/summernote.min.js"></script>
<script src="__STATIC__/layout/js/plugins/summernote/summernote-zh-CN.js"></script>
 <!-- <script src="__STATIC__/layout/js/plugins/layer/laydate/laydate.js"></script> -->
<script>
  
    $(document).ready(function () {
        $('.summernote').summernote({
            lang: 'zh-CN'
        });
    });

  
  var jieshou = $("#area_id");
 sousuo(jieshou);
       function sousuo(id){
            id.bsSuggest({
            allowNoKeyword: false, //是否允许无关键字时请求数据
            multiWord: true, //以分隔符号分割的多关键字支持
            separator: ",", //多关键字支持时的分隔符，默认为空格
            getDataMethod: "url", //获取数据的方式，总是从 URL 获取
            url: 'http://unionsug.baidu.com/su?p=3&t=' + (new Date()).getTime() + '&wd=',
            /*优先从url ajax 请求 json 帮助数据，注意最后一个参数为关键字请求参数*/
            jsonp: 'cb',
            /*如果从 url 获取数据，并且需要跨域，则该参数必须设置*/
            processData: function (json) { // url 获取数据时，对数据的处理，作为 getData 的回调函数
                var i, len, data = {
                    value: []
                };
                if (!json || !json.s || json.s.length === 0) {
                    return false;
                }

                // console.log(json);
                len = json.s.length;

                jsonStr = "{'value':[";
                for (i = 0; i < len; i++) {
                    data.value.push({
                        word: json.s[i]
                    });
                }
                data.defaults = 'baidu';

                //字符串转化为 js 对象
                return data;
            }
        });

          }

</script>

<!-- Web Uploader -->
<script type="text/javascript">
    // 添加全局站点信息
    var BASE_URL = '__STATIC__/layout/js/plugins/webuploader';
</script>
<script src="__STATIC__/layout/js/plugins/webuploader/webuploader.min.js"></script>
<script>
    // 文件上传
    jQuery(function() {
        var $ = jQuery,
            $list = $('#thelist'),
            $btn = $('#ctlBtn'),
            state = 'pending',
            uploader;

         var ids = [{if $aid}{if $apply.fujian}value="{$apply.fujian}"{/if}{/if} ];
        uploader = WebUploader.create({

            // 不压缩image
            resize: false,

            // swf文件路径
            swf: BASE_URL + '/js/Uploader.swf',

            // 文件接收服务端。
            server: '{:url("upload/fileupload")}',

            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#picker'
        });

        // 当有文件添加进来的时候
        uploader.on( 'fileQueued', function( file ) {
            $list.append( '<div id="' + file.id + '" class="item">' +
                '<h4 class="info">' + file.name + '</h4>' +
                '<p class="state">等待上传...</p>' +
                '</div>' );
        });

        // 文件上传过程中创建进度条实时显示。
        uploader.on( 'uploadProgress', function( file, percentage ) {
            var $li = $( '#'+file.id ),
                $percent = $li.find('.progress .progress-bar');

            // 避免重复创建
            if ( !$percent.length ) {
                $percent = $('<div class="progress progress-striped active">' +
                    '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                    '</div>' +
                    '</div>').appendTo( $li ).find('.progress-bar');
            }

            $li.find('p.state').text('上传中');

            $percent.css( 'width', percentage * 100 + '%' );
        });

        uploader.on( 'uploadSuccess', function( file,response) {
            if(response.success)
                ids.push(response.id)
            $( '#'+file.id ).find('p.state').text(response.msg);
        });

        uploader.on( 'uploadError', function( file ) {
            $( '#'+file.id ).find('p.state').text('上传出错');
        });

        uploader.on( 'uploadComplete', function( file ) {
            $('#attach').val(ids.join(','))
            $( '#'+file.id ).find('.progress').fadeOut();
        });

        uploader.on( 'all', function( type ) {
            if ( type === 'startUpload' ) {
                state = 'uploading';
            } else if ( type === 'stopUpload' ) {
                state = 'paused';
            } else if ( type === 'uploadFinished' ) {
                state = 'done';
            }

            if ( state === 'uploading' ) {
                $btn.text('暂停上传');
            } else {
                $btn.text('开始上传');
            }
        });

        $btn.on( 'click', function() {
            if ( state === 'uploading' ) {
                uploader.stop();
            } else {
                uploader.upload();
            }
            return false
        });

        $('#renyuan').on('click','.ren .close',function () {
            $(this).closest('.ren').remove()
        })
    });
   

</script>
</body>

</html>